<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title>Kukbuk - Szczegóły przepisu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css"
	href="../../../css/bootstrap.min.css"
	th:href="@{/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" href="../../../css/custom.css"
	th:href="@{/css/custom.css}" />
</head>

<body>
	<!-- TOP MENU -->
	<div th:substituteby="template :: top-menu"></div>
	<!-- /TOP MENU -->

	<!-- MAIN CONTAINER -->
	<div class="container">


		<div class="row">
			<!-- MESSAGE BOXES -->
			<div class="row" th:include="template :: message-boxes"></div>
			<!-- /MESSAGE BOXES -->


			<div class="row">
				<h2>
					<span th:text="${recipe.name}">Surówka z ogórkiem
						szklarniowym</span>
				</h2>
				<h6>
					<span th:text="${recipe.shortDescription}">Krótki opis</span>
				</h6>
			</div>

			<div class="row well">
				<div class="span12">
					<div class="span5">
						<div class="row"
							th:if="${#bools.isTrue(beans.userSession.user) and not #lists.isEmpty(cookbooksWithoutThisRecipe)}">
							<form class="form-inline"
								th:action="@{'/user/cookbook/recipe/add/' + ${recipe.id}}"
								th:object="${form}" method="POST">

								<select id="cookbook" th:field="*{cookbookId}">
									<option th:each="book : ${cookbooksWithoutThisRecipe}"
										th:value="${book.id}" th:text="${book.name}">BRAK</option>
								</select>

								<button class="btn btn-primary" type="submit">
									<i class="icon-ok icon-white"></i> Dodaj do książki
								</button>

							</form>
						</div>


						<div class="row">
							<strong>Autor:</strong> <a
								th:href="@{${beans.userSession.user}? '/user/profile/' + ${recipe.author.id} : '#'}">
								<span
								th:text="${beans.userService.getUserByKey(recipe.author).login}">Mariusz
									Kowalski</span>
							</a>
						</div>

						<div class="row">
							<strong>Informacje:</strong> <em
								th:text="${recipe.prepareTime + ' minut dla ' + recipe.servings + ' osób'}">20min
								dla 4 osób</em>
						</div>
						<br />
						<div class="row">
							<strong>Składniki:</strong>
							<p th:utext="${recipe.ingredients}">halabala dla 4 osób</p>
						</div>
					</div>

					<!-- Image -->
					<div class="span6 pull-right">
						<div class="row">
							<div class="span1"
								th:if="${#bools.isTrue(beans.userSession.user) and #bools.isFalse(beans.recipeService.isRecipeRatedByUser(beans.userSession.user, recipe))}">
								<a type="button" class="btn btn-danger"
									th:href="@{'/recipe/rate/' + ${recipe.id} + '/-1'}"> <i
									class="icon-minus icon-white"></i>
								</a>
							</div>
							<div class="span4">

								<div class="progress progress-striped active row">
									<div class="bar" style="width: 90%;"
										th:style="${'width: ' + recipe.votePercent + '%'}"
										th:text="${recipe.negativeVoteCount + '/' + recipe.positiveVoteCount}">10/90</div>
								</div>

								<div class="row">
									<img style="max-width: 320px; max-height: 320px;"
										src="http://politicallunacy.files.wordpress.com/2010/07/christmas-cake.jpg"
										th:src="${recipe.imageUrl}"></img>
								</div>

							</div>
							<div class="span1"
								th:if="${#bools.isTrue(beans.userSession.user) and #bools.isFalse(beans.recipeService.isRecipeRatedByUser(beans.userSession.user, recipe))}">
								<a type="button" class="btn btn-success"
									th:href="@{'/recipe/rate/' + ${recipe.id} + '/1'}"> <i
									class="icon-plus icon-white"></i>
								</a>
							</div>
						</div>
					</div>
				</div>

				<!-- Description -->
				<div class="span11">
					<div class="row">
						<strong>Opis:</strong>
						<p th:utext="${recipe.description}">Ogórka szklarniowego umyć,
							osuszyć i pokroić w paski w skórce. Czerwoną paprykę oczyścić,
							opłukać i pokroić w paski. Por opłukać i pokroić w półplasterki.
							Czosnek obrać i zmiażdżyć.</p>
					</div>

				</div>
			</div>
		</div>

	</div>
	<!-- /MAIN CONTAINER -->

	<!-- ======================================================== -->
	<!-- Scripts at bottom of page means faster loading times. -->
	<!-- Latest jQuery -->
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<!-- Bootstrap -->
	<script type="text/javascript" src="../../../js/bootstrap.min.js"
		th:src="@{/js/bootstrap.min.js}"></script>
	<!-- Custom -->
	<script type="text/javascript" src="../../../js/custom.js"
		th:src="@{/js/custom.js}"></script>
</body>
</html>